<template>
	<div class="me-page">

		<div class="heade flex unified-flex-align unified-color-white unified-flex-space-between unified-bg-green">

			<p class="unified-font-weight-600">微信(Wechat)公众号推送</p>
			<div>
				<el-button type="warning" icon="el-icon-plus" plain>单独推送</el-button>
				<el-button type="primary" icon="el-icon-plus" plain>群推送</el-button>
				<el-button icon="el-icon-s-tools"></el-button>

			</div>
		</div>

		<div class="reveal">

			<div class="messge">
				<el-alert title="通过短信发送信息到客户" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" :closable="false">
				</el-alert>
			</div>

			<div class="cutTag unified-bg-grey unified-cursor-default">

				<div class="tag-li unified-transition unified-color-black unified-font-size-10 unified-bg-grey"
					v-for="(typeItem,index) in $store.state.pushType" :key="index"
					:class="{'unified-color-white':pushTypeIndex==index}" @click="tagTypeClick(index)">
					{{typeItem}}
				</div>




				<div ref="tag-checked" class="tag-checked unified-bg-blue unified-transition"></div>
			</div>

			<div class="messge-list">



				<el-table :data="pushData" style="width: 100%" :row-class-name="tableRowClassName">
					<el-table-column type="index" label="#" width="60">
					</el-table-column>
					<el-table-column prop="title" label="PUSH Title" width="280">

						<template slot-scope="data">
							<el-link type="primary">{{data.row.title}}</el-link>
						</template>

					</el-table-column>
					<el-table-column prop="template" label="Template" width="280">
					</el-table-column>
					<el-table-column prop="userRole" label="USER">
					</el-table-column>
					<el-table-column prop="number" label="Number" width="160">

						<template slot="header">

							<div class="unified-table-div">
								<span>Number / 条</span>
							</div>
						</template>

						<template slot-scope="data">
							<div class="unified-table-div">

								<span>{{data.row.number}}</span>

							</div>
						</template>
					</el-table-column>
					<el-table-column prop="state" label="State" width="120">
						<template slot="header">
							<div class="unified-table-div unifined-text-right">
								<span>State</span>
							</div>
						</template>
						<template slot-scope="data">

							<div class="unified-table-div unifined-text-right">

								<el-tag :type="data.row.state==0?'success':data.row.state==1?'warning':'danger'">
									{{pushState(data.row.state) }}
								</el-tag>
							</div>
						</template>
					</el-table-column>
				</el-table>

			</div>



			<div class="fool-div unified-flex-align unified-flex-center flex">
				<el-pagination :page-sizes="[100, 200, 300, 400]" :page-size="100"
					layout="total, sizes, prev, pager, next, jumper" :total="400">
				</el-pagination>

			</div>
		</div>



	</div>
	<!-- 现有额度 -->
	<!-- 已用额度 -->
	<!-- 剩余额度 -->
</template>

<script>
	export default {
		data() {

			return {

				// 推送类型
				pushTypeIndex: 0,
				// 推送数据
				pushData: [{
						title: "推送短信标题,9.9包邮送到家",
						template: "包邮到家",
						userRole: 561561561515,
						number: 100,
						state: 0
					},
					{
						title: "推送短信标题,9.9包邮送到家",
						template: "包邮到家",
						userRole: 561561561515,
						number: 100,
						state: 2
					},
					{
						title: "推送短信标题,9.9包邮送到家",
						template: "包邮到家",
						userRole: 561561561515,
						number: 100,
						state: 1
					},
					{
						title: "推送短信标题,9.9包邮送到家",
						template: "包邮到家",
						userRole: 561561561515,
						number: 100,
						state: 0
					}, {
						title: "推送短信标题,9.9包邮送到家",
						template: "包邮到家",
						userRole: 561561561515,
						number: 100,
						state: 0
					}, {
						title: "推送短信标题,9.9包邮送到家",
						template: "包邮到家",
						userRole: 561561561515,
						number: 100,
						state: 0
					}, {
						title: "推送短信标题,9.9包邮送到家",
						template: "包邮到家",
						userRole: 561561561515,
						number: 100,
						state: 0
					},

				],
				

			}
		},

		methods: {

			// 点击了 推送分类Tag
			tagTypeClick(index) {
				this.$refs['tag-checked'].style.left = document.querySelectorAll('.tag-li')[index].offsetLeft + 'px'
				this.pushTypeIndex = index
			}

		},

		computed: {
			pushState() {
				return (stateCode) => {
					let result = this.$store.state.pushState.filter((item) => {
						if (item.state == stateCode) {
							return true
						}
					})
					return result[0].text
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.me-page {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		/* padding: 20px 0px; */
		flex-direction: column;
	}

	.heade,
	.reveal {
		width: 100%;
		box-sizing: border-box;
	}

	.heade {
		height: 65px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 10px 30px;
		margin-top: 00px;
		position: sticky;
		top: -20px;
		z-index: 100;
	}

	.reveal {
		background-color: #fff;
	}

	.fool-div {
		width: 100%;
		height: 70px;
		background-color: #fff;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		overflow: hidden;

	}

	.messge-list {
		width: 96%;
		margin: 0px auto;
		padding-bottom: 0px;
	}

	.messge {
		width: 96%;
		margin: 0px auto;
		margin-top: 20px;
		margin-bottom: 20px;
		border-radius: 8px;
		overflow: hidden;
	}

	.cutTag {
		width: 250px;
		height: 40px;
		display: flex;
		margin-left: 20px;
		border-radius: 20px;
		overflow: hidden;
		margin-top: 35px;
		margin-bottom: 15px;
		position: relative;
	}

	.tag-checked {
		width: 50%;
		height: 100%;
		/* background-color: #2269F350; */
		position: absolute;
		opacity: .8;
		left: 0;
		top: 0;
		border-radius: 20px;
		z-index: 0;
	}

	.tag-li {
		background-color: transparent;
		text-align: center;
		line-height: 40px;
		width: 50%;
		height: 100%;
		z-index: 10;
		letter-spacing: 1px;
	}
</style>
